import React, { Component } from 'react';
import './06表单css.scss'
class DemoFormInput extends Component {
  state = {
    title: '前端前景技术发展交流',//活动名称
    city: 'zhangjiako',//城市
    date: '',//日期
    time: '',//时间
    phone: '',//手机号
    switch:false,//switch开关
    occupation:'',//职业
    activity:'1',//活动赞助商
    describe:'',//描述
    data: [
      {
        label: '线上活动',
        name: '线上活动',
        checked: true
      },
      {
        label: '推广类',
        name: '推广类',
        checked: false
      },
      {
        label: '线下活动',
        name: '线下活动',
        checked: false
      },
      {
        label: '品牌介绍',
        name: '品牌介绍',
        checked: false
      }
    ],
    msgData:[
      {
        title: '前端前景技术发展交流',//活动名称
        city: 'zhangjiako',//城市
        date: '',//日期
        time: '',//时间
        phone: '',//手机号
        occupation:'',//职业
        describe:'',//描述
      }
    ]
  }

  //  城市
  handleSelectCity = (e) => {
    // console.log(e.target.value);
    this.setState({
      city: e.target.value
    })
  }

  // 日期
  Changedate = (e) => {
    // console.log(e);
    this.setState({
      date: e.target.value
    })
  }

  // 时间
  Changetime = (e) => {
    this.setState({
      time: e.target.value
    })
  }

  // 手机号
  Changephone = (e) => {
    this.setState({
      phone: e.target.value
    })
  }

  // switch开关
  switchClick = (e)=>{
    this.setState({
      switch:e
    })
  }

  // 职业
  Changeoccupation = (e)=>{
    this.setState({
      occupation: e.target.value
    })
  }

  // 活动类型
  handlechecked = (e,index)=>{
    // console.log(e, index);
    if (e.target.type === 'checkbox') {
      this.state.data[index].checked = !this.state.data[index].checked
    }
    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value
    })
    console.log('checkbox', this.state.data)
  }

  // 活动赞助商
  handleactivity = (e)=>{
    this.setState({
      activity: e.target.value
    })
  }

  // 描述
  Changedescribe = (e)=>{
    this.setState({
      describe: e.target.value
    })
  }

  // 提交
  submit = ()=>{
    let {title,city,date,time,phone,occupation,data,activity,describe} = this.state
    let dataArr = {
      title,city,date,time,phone,occupation,data,activity,describe
    }
    let newArr = [...this.state.msgData]
    newArr.push({ title,city,date,time,phone,occupation,describe,activity})
    this.setState({
      msgData: newArr
    })
    console.log(dataArr);
  }

  // 重置
  reset = ()=>{
    let that = this
    this.setState({
      title:'前端前景技术发展交流',
      city:'',
      date:'',
      time:'',
      phone:'',
      switch:false,
      occupation:'',
      activity:'1',
      describe:'',
      // data:[]
    })
  }

  // 删除
  delArr = (index)=>{
    this.state.msgData.splice(index,1)
    this.setState({
      msgData:this.state.msgData
    })
  }
  render () {
    return (<>
      <div className='demopinput'>
        <div className='headinput'>
          {/* 活动名称 */}
          <div className='activity'>
            <span>活动名称</span>
            <input className='activityinput' type="text" placeholder='请输入活动名称' value={this.state.title} readOnly />
          </div>
          {/* 城市 */}
          <div className='city'>
            <span>城市</span>
            <select value={this.state.city} onChange={this.handleSelectCity}>
              <option value="beijing">北京</option>
              <option value="shanghai">上海</option>
              <option value="zhangjiako">张家口</option>
            </select>
          </div>
          {/* 日期 */}
          <div className='date'>
            <span>日期</span>
            <input className='dates' type="date" value={this.state.date} onChange={this.Changedate} />
            -
            <input type="time" className='time' value={this.state.time} onChange={this.Changetime} />
          </div>
        </div>
        <div className='work'>
          {/* 报名电话 */}
          <div className='phone'>
            <span>报名电话</span>
            <input type="text" placeholder='请输入报名电话' value={this.state.phone} onChange={this.Changephone} />
          </div>
          {/* switch开关 */}
          <div className='switchCom'>
            <span>允许电话沟通</span>
            <input type="checkbox" className="switch-button" value={this.state.switch} id="switch-button" checked={this.state.switch} onChange={() => this.switchClick(!this.state.switch)} />
            <label htmlFor="switch-button"></label>
          </div>
          {/* 目前职业 */}
          <div className='occupation'>
            <span>目前职业</span>
            <input type="text" value={this.state.occupation} onChange={this.Changeoccupation} placeholder='请输入职业' />
          </div>
        </div>
        <div className='buttonCom'>
          {/* 活动类型 */}
          <div className='activitycheckbox'>
            <span>活动类型</span>
            {
              this.state.data.map((item,index)=>{
                return (
                  <label key={index}>
                  <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.handlechecked(e, index)} />{item.label}
                </label>
                )
              })
            }
          </div>
          {/* 活动赞助商 */}
          <div className='activityradio'>
            <span>活动赞助商</span>
            <label>
              <input type="radio" value='1' checked={this.state.activity==='1'} onChange={this.handleactivity}/>淘宝
            </label>
            <label>
              <input type="radio" value='2' checked={this.state.activity==='2'} onChange={this.handleactivity}/>京东
            </label>
          </div>
        </div>
        <div className='bottomCom'>
          {/* 描述 */}
          <div className='textCom'>
            <span>描述</span>
            <textarea placeholder='请输入描述内容' name="" id="" cols="30" rows="3" value={this.state.describe} onChange={this.Changedescribe}></textarea>
          </div>
          {/* 按钮 */}
          <div className='buttons'>
            <button className='submit' onClick={this.submit}>提交</button>
            <button className='reset' onClick={this.reset}>重置</button>
          </div>
        </div>
      </div>
      <div>
            {
              this.state.msgData.map((item,index)=>{
                return <>
                <h3>列表</h3>
                <button onClick={()=>this.delArr(index)}>删除</button>
                  <ul key={index}>
                    <li>{item.title}</li>
                    <li>{item.city}</li>
                    <li>{item.date}</li>
                    <li>{item.time}</li>
                    <li>{item.phone}</li>
                    <li>{item.occupation}</li>
                    <li>{item.activity}</li>
                    <li>{item.describe}</li>
                  </ul>
                </>
              })
            }
          </div>
    </>);
  }
}

export default DemoFormInput;